<?php //echo CHtml::beginForm($this->createUrl('/backend/galeri/croping'), 'POST')?>
<?php //$form in this example is of type AvatarForm, containing variables for the crop area's x, y, width and height, hence the corresponding widget form element parameters ?>
<?php echo CHtml::hiddenField('cropID', 'cropID');?>
<?php echo CHtml::hiddenField('AvatarForm_cropX', 'cropX', array('value' => '0'));?>
<?php echo CHtml::hiddenField('AvatarForm_cropY', 'cropY', array('value' => '0'));?>
<?php echo CHtml::hiddenField('AvatarForm_cropW', 'cropW', array('value' => '159'));?>
<?php echo CHtml::hiddenField('AvatarForm_cropH', 'cropH', array('value' => '119'));?>
<?php echo CHtml::hiddenField('image_url', $imageUrl);?>
<?php $previewWidth = 159; $previewHeight = 119;?>
<?php $this->widget('ext.yii-jcrop.jCropWidget',array(
        'imageUrl'=>$imageUrl,
        'formElementX'=>'AvatarForm_cropX',
        'formElementY'=>'AvatarForm_cropY',
        'formElementWidth'=>'AvatarForm_cropW',
        'formElementHeight'=>'AvatarForm_cropH',
        'previewId'=>'avatar-preview', //optional preview image ID, see preview div below
        'previewWidth'=>$previewWidth,
        'previewHeight'=>$previewHeight,
        'jCropOptions'=>array(
          //  'aspectRatio'=>1,
            'minSize'=>array(385, 289),
            'maxSize'=>array( 512,384),
            'boxWidth'=>512,
            'boxHeight'=>384,
            'setSelect'=>array(0, 0, 1024, 768),
        ),
    )
);
?>
<div id="avatar-thumb" style="position:relative; overflow:hidden; width:<?=$previewWidth?>px; height:<?=$previewHeight?>px; margin-top: 10px; margin-bottom: 10px;">
    <img id="avatar-preview" src="<?=$imageUrl?>" style="width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">
</div>

<?php //echo CHtml::submitButton('Crop Avatar'); ?>
<?php //echo CHtml::endForm()?>